<template>
  <div class="self_adaption">
    <div :class="['TUIKit', isH5 && 'TUIKit-h5']">
      <div class="TUIKit-main-container">
        <div v-if="currentNavbar === 'conversation'" class="TUIKit-main">
          <div
            v-if="!(isH5 && currentConversationID)"
            class="TUIKit-main-aside"
          >
            <TUISearch searchType="global"></TUISearch>
            <TUIConversation></TUIConversation>
          </div>
          <div v-if="!isH5 || currentConversationID" class="TUIKit-main-main">
            <TUIChat :currentConversationID="currentConversationID"> </TUIChat>
            <TUIGroup :class="isH5 ? 'chat-popup' : 'chat-aside'" />
            <TUISearch
              :class="isH5 ? 'chat-popup' : 'chat-aside'"
              searchType="conversation"
            />
          </div>
          <TUIGroup v-if="isH5 && !currentConversationID" class="chat-popup" />
          <TUIContact displayType="selectFriend" />
        </div>
        <div v-else-if="currentNavbar === 'contact'" class="TUIKit-main">
          <TUIContact
            displayType="contactList"
            @switchConversation="currentNavbar = 'conversation'"
          />
        </div>
        <TUICallKit
          class="callkit-container"
          :allowedMinimized="true"
          :allowedFullScreen="false"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { TUIStore, StoreName } from "@tencentcloud/chat-uikit-engine";
import { TUICallKit } from "@tencentcloud/call-uikit-vue";
import {
  TUISearch,
  TUIConversation,
  TUIChat,
  TUIContact,
  TUIGroup,
} from "@/TUIKit";
import { isH5 } from "@/TUIKit/utils/env";
const currentConversationID = ref<string>("");
const currentNavbar = ref<string>("conversation");
TUIStore.watch(StoreName.CONV, {
  currentConversationID: (id: string) => {
    if (id == "") {
      var url = window.location.search.split("=")[1];
      currentConversationID.value = url;
    } else {
      currentConversationID.value = id;
    }
  },
});
</script>
<style scoped lang="scss">
@import "@/TUIKit/assets/styles/common.scss";
@import "@/TUIKit/assets/styles/sample.scss";
</style>
